<template>
  <a-card :bordered="false">
    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button @click="handleAdd" type="primary" icon="plus">批量设置</a-button>
<!--      <span class="ant-input-span">        本月汇总占比： {{ sum }} % </span>-->
    </div>
    <a-calendar @panelChange="onPanelChange" @select="onSelect">
      <ul slot="dateCellRender" slot-scope="value" class="events">
        <li v-for="item in getListData(value)" :key="item.id">
          <a-badge status="success">
             {{item.rate.toString()}}
          </a-badge>
        </li>
      </ul>
    </a-calendar>
    <!-- 表单区域 -->
    <stmKpiCalendar-modal ref="modalForm" @ok="modalFormOk"></stmKpiCalendar-modal>
    <stm-kpi-calendar-add-modal ref="addModalForm" @ok="modalFormOk"></stm-kpi-calendar-add-modal>
  </a-card>
</template>

<script>
import '@/assets/less/TableExpand.less'
import { getAction } from '@/api/manage'
import { httpAction } from '@/api/manage'
import pick from 'lodash.pick'
import moment from 'moment'
import 'moment/locale/zh-cn'
import StmKpiCalendarModal from './modules/StmKpiCalendarModal'
import StmKpiCalendarAddModal from './modules/StmKpiCalendarAddModal'
//moment.locale('zh-cn')

export default {
  name: 'StmKpiCalendarList',
  components: {
    StmKpiCalendarModal,
    StmKpiCalendarAddModal
  },
  data() {
    return {
      description: '业绩日历',
      confirmLoading: false,
      listData: [],
      year: Number,
      month: Number,
      sum: Number,
      mode: 'month',
      getFlag: false,
      form: this.$form.createForm(this),
      url: {
        list: '/stm/stmKpiCalendar/listByDate',
      }
    }
  },
  computed: {
    importExcelUrl: function() {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    }
  },
  created () {
    moment.locale('zh-cn');
    console.log('aaaaa');
    this.year = moment().year();
    this.month = moment().month()+1;
    this.getFlag = true;
    this.loadData();
  },
  methods: {
    onPanelChange(value, mode) {
      console.log('onPanelChange');
      this.year = value.year();
      this.month = value.month()+1;
      this.mode = mode;
      this.getFlag = true;
      this.loadData();
    },
    getListData(value) {
      if (this.listData && this.listData.length > 0) {
        console.log('c');
        return this.listData.filter(item => item.day === value.date() && item.month === value.month()+1);
      }
    },
    onSelect(value) {
      console.log(value.date());
      let kpiData = this.listData.filter(item => item.day === value.date() && item.month === value.month()+1)
      if (kpiData && kpiData.length > 0) {
        this.$refs.modalForm.edit(kpiData[0]);
        this.$refs.modalForm.title = "编辑";
      } else {
        this.$refs.modalForm.add(value);
        this.$refs.modalForm.title = "新增";
      }

    },
    handleAdd() {
      // console.log("year：" +this.year+"  month："+ this.month);
      let value = {};
      value.year = this.year;
      value.month = this.month;
      this.$refs.addModalForm.add(value);
      this.$refs.addModalForm.title = "批量设置";
    },

    modalFormOk() {
      this.getFlag = true;
      this.loadData();
    },
    loadData() {
      if (this.getFlag && this.mode === 'month') {
        this.getFlag = false;
        getAction(this.url.list,{year:this.year, month: this.month }).then((res) => {
          if (res.success) {
            console.log('success');
            this.listData = res.result;
            let sum = 0;
            this.listData.forEach((item) => {
              sum += item.rate;
            });
            this.sum = Number.parseFloat(sum).toFixed(2);
          } else {
            this.listData = [];
          }
        })
      }
    },
  }
}
</script>
<style scoped>

/deep/ .ant-fullcalendar-header {
  padding: 11px 16px 11px 0;
  text-align: center;
}

/deep/ .ant-fullcalendar-fullscreen .ant-fullcalendar-header .ant-radio-group {
  margin-left: 16px;
  display: none;
}

.ant-input-span {
  white-space:pre;
}

.events {
  list-style: none;
  margin: 0;
  padding: 0;
}
.events .ant-badge-status {
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  text-overflow: ellipsis;
  font-size: 18px;
}
</style>